<template>
    <div class="poster">
        <img id="img" :src="poster" alt="">
    </div>

    <div class="link">
        <van-field v-model="url" type="textarea" readonly id="url" ></van-field>
        <van-button class=" mui-btn-primary" type="primary" id="btn" @click="copy">点击复制</van-button>
    </div>

    <div class="update">
        <van-button class=" mui-btn-success" type="success" id="update" @click="generate">重新生成海报</van-button>
    </div>
</template>

<script setup>

const { proxy } = getCurrentInstance()
const LoginUser = reactive(proxy.$cookies.get('LoginUser') ?? {});
const poster = ref('');
const url = ref('');

const copy = () => {
    const url = document.getElementById('url').value;
    const input = document.createElement('input');
    input.value = url;
    document.body.appendChild(input);
    input.select();
    document.execCommand('copy');
    document.body.removeChild(input);
    success('链接已复制到粘贴板');
}

onMounted(async () => {
    await generate();
})

const generate = async () => {
    // TODO: generate poster
    let data = {
        busid: LoginUser.id ?? 0,
        mobile: LoginUser.mobile ?? '',
    }

    let result = await Api.poster(data);
    console.log(result);
    if (result.code == 1) {
        poster.value = result.data.poster;
        url.value = result.data.url;
        success(result.msg);
    } else {
        error(result.msg);
    }
}

</script>

<style scoped>

body{
    padding-top: 46px;
    padding-bottom: 70px;
}

.footer{
    position: fixed;
    width: 100%;
    bottom: 0;
}

.footer button{
    width: 100%;
}

.poster{
    width:90%;
    margin: 20px auto;
}

.poster img{
    width: 100%;
}


.link{
    width:90%;
    margin:0 auto;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    background:#fff;
    padding:10px;
}

.link button{
    display: inline-block;
    width:30%;
}

.link input{
    margin:0;
    margin-right:10px;
}

.update{
    width: 100%;
    text-align: center;
    margin-top:10px;
}

</style>